<template>
  <view class="pannel-box" :style="{ paddingBottom: systemInfo.safeAreaInsets && systemInfo.safeAreaInsets.bottom || 40 + 'px' }">
    <slot name="navbar">
      <NavBar v-if="navbar" :title="title"></NavBar>
    </slot>
    <ScrollWrap
      class="scroll-wrap"
      :loading="loading"
      :more="more"
      :finished="finished"
      @load="handleLoad"
      @refresh="handleRefresh"
    >
      <slot></slot>
    </ScrollWrap>
    <slot name="tabbar">
      <TabBar v-if="tabbar"></TabBar>
    </slot>
  </view>
</template>

<script lang="ts" setup>
import NavBar from "./NavBar.vue";
import TabBar from "./TabBar.vue";
import ScrollWrap from "./ScrollWrap.vue";
import { ref } from "vue";
import useSystem from '@/store/system';

defineProps({
  title: { type: String, default: "" },
  more: { type: Boolean, default: false },
  finished: { type: Boolean, default: false },
  navbar: { type: Boolean, default: false },
  tabbar: { type: Boolean, default: false },
});

const emit: any = defineEmits(["load", "refresh"]);

const loading: any = ref(true);

const [ systemInfo ] = useSystem();


const handleLoad = () => {
  emit("load", isShowLoading);
};

const handleRefresh = () => {

  emit("refresh", isShowLoading);
  // 停止下拉刷新动画
  let t = setTimeout(() => {
    clearTimeout(t);
    uni.stopPullDownRefresh();
  }, 40);
};

async function isShowLoading(fetchFunc: any) {
  showLoading();
  await fetchFunc();
  hideLoading();
}

function showLoading() {
  uni.showLoading({
    title: "数据加载中",
  });
}

function hideLoading() {
  uni.hideLoading();
}

//  导出
defineExpose({
  dataLoad: isShowLoading
})
</script>

<style lang="scss" scoped>
.pannel-box {
  position: relative;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f9f9f9;

  .scroll-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
</style>
